<template>
  <div class="qrCode">
    <el-dialog
        :title="!type?'Top Up':'Download Sidequest App'"
        :visible.sync="qrCodeVisible"
        width="30%"
        :modal="false"
        :close-on-click-modal="false"
        :before-close="handleClose">
        <img v-if="!type" src="../assets/images/topUp.png" alt="1">
        <div class="down" v-else>
          <el-tabs v-model="activeName">
            <el-tab-pane label="Android" name="first">
              <img src="../assets/images/downApp.png" alt="2">
            </el-tab-pane>
            <el-tab-pane label="IOS" name="second">
              <img src="../assets/images/downApp-ios.png" alt="2">
            </el-tab-pane>
          </el-tabs>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">Cancel</el-button>
          <el-button type="primary" @click="handleClose">OK</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
import f from "@/utils/communication";

export default {
  name: "lockPc",
  props:{
    qrCodeVisible:{
      type:Boolean
    },
    type:{
      type:Number
    },
  },
  data(){
    return{
      password:'',
      activeName:'first'
    }
  },

  methods:{
    handleClose(){
      this.$emit('handleClose')
    },

    handleConfirm(){
      if(this.password === ''){
        this.$message.warning('Lock pin can not be empty!')
        return false
      }
      this.$emit('handleClose')
      f.handleOut('lockpc',this.password)
    }
  }
}
</script>

<style scoped lang="scss">
  .qrCode{
    ::v-deep .el-dialog__wrapper{
      .el-dialog__body{
        padding-top: 0px!important;
      }
    }
    img{
      width: 100%;
    }
    ::v-deep .down{
      width: 100%;
      .el-tabs__nav-scroll{
        padding-left: 0 !important;
        height: 30px!important;
        padding-top: 10px!important;
      }
      .el-tabs__item{
        color: #0E1419!important;
        margin: 0 20px;
        line-height: 30px;
      }
      .el-tabs__item.is-active{
        color: #FFD40E!important;
      }
      .el-tabs{
        width: 100%;
        height: auto;
        padding-top: 0!important;
      }
    }
  }
</style>